<?php

use yii\helpers\Url;
use yii\helpers\Html;
use website\helpers\Render;
use common\models\User;
use common\models\Design;
use common\models\UserCollection;

$this->title = '设计师作品搜索';
?>
<style>
    #info-search {padding:40px 20px 20px 20px;line-height:30px;}
    #info-search .form-item {margin-bottom:20px;}
    #info-search .input-title {display:block;float:left;width:110px;background-color:#f00;text-align:center;color:#fff;}
    #info-search .input-block {position:relative;margin-left:130px;}
    #info-search .moderate .flyer-choise {width:93px;}
    #info-search .moderate .flyer-choise label {width:70px;padding-left:23px;background-position-x:4px;}
    
    #info-table {padding-top:10px;}
    #info-table .design-detail .panel {position:relative;}
    #info-table .design-detail .imager {height:270px;}
    #info-table .design-detail .username {width:auto;}
    #info-table .design-detail .view,
    #info-table .design-detail .collection {width:auto;margin-left:15px;}
    #info-table .design-detail .title {font-size:14px;}
    #info-table .design-detail .collection-data {position:absolute;top:10px;right:10px;display:none;}
    #info-table .design-detail .panel:hover .collection-data {display:block;}
</style>

<!-- hot design -->
<div class="contenter mb-20px">
    
    <?= $this->render('/layouts/break-crumbs') ?>

    <div class="box-shadow" id="info-search">
        <div class="form-item">
            <div class="input-title">行业类型</div>
            <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('category_id', $categories, is_array(Render::value($params, 'category_id'))?max(Render::value($params, 'category_id')):Render::value($params, 'category_id'), ['prompt' => '不限', 'class' => 'tabler']) ?></div>
        </div>
        <div class="form-item">
            <div class="input-title">设计风格</div>
            <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('style', Design::$styleSelector, Render::value($params, 'style'), ['prompt' => '不限', 'class' => 'tabler']) ?></div>
        </div>
        <div class="form-item">
            <div class="input-title">设计类型</div>
            <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('model', $models, Render::value($params, 'model'), ['prompt' => '不限', 'class' => 'tabler']) ?></div>
        </div>
        <div class="form-item">
            <div class="input-title">作品等级</div>
            <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('level', Design::$levelSelector, Render::value($params, 'level'), ['prompt' => '不限', 'class' => 'tabler']) ?></div>
        </div>
        <!--div class="form-item">
            <div class="input-title">综合排序</div>
            <div class="input-block"><span class="flyer-status red">作品等级</span></div>
        </div-->
    </div>
    <div class="clear mt-20px pb-20px box-shadow">
        <div class="pd-10px clear" id="info-table">
            <div class="pd-10px"><i class="icon-search"></i> 数据加载中，请稍后.</div>
        </div>
        <div class="flyer-page mt right" id="info-page"><div class="html mr-10px"></div></div>
    </div>
</div>
<div id="render" style="display:none;">
    <?= Render::select('style', \common\models\Design::$styleSelector, null) ?>
</div>
<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('art-template/template.js') ?>"></script>
<script src="<?= Render::static('flyer/tabler.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script>
    var tablerClass = new tabler();
    $(document).ready(function() {
        // 表单美化
        (new flyer).init({form: '#info-search'});

        // 初始化表格异步加载事件
        tablerClass.init({
            // 请求地址
            url: '<?= Url::to('@web/search/design') ?>', showLoading: false,
            // 数据渲染配置
            table: '#info-table', page: '#info-page', template: 'info-template', search: '#info-search', readyCall: true,
            afterPost: function(param) {
                tableHandler.renderCategory({ category: $('.styles'), select: '#render select[name=style]', color: false, splite: '，', default: '--' });
                // 初始化 收藏按钮事件
                tableHandler.requestSingle({
                    button: $(param.tabler).find('.collection-data'), url: "<?= Url::to('@web/user/collection') ?>", isConfirm: false, trKey: '.design-detail',
                    beforePost: function(params) {
                        params.data = { handle: $(params.mthis).attr('data-handle'), id: $(params.tr).attr('data-id'), type: '<?= UserCollection::TypeDesign ?>' };
                    },
                    requestSuccess: function(params) {
                        if($(params.mthis).attr('data-handle') == 'collection') {
                            $(params.mthis).attr('data-handle', 'revoke').html('取消收藏');
                        }
                        else {
                            $(params.mthis).attr('data-handle', 'collection').html('加入收藏');
                        }
                    }
                });
            }
        });
        $('#info-search .flyer-choise input').bind('change', function() {
            tablerClass.load();
        });
    });
</script>
<script id="info-template" type="text/html">
    {{if infos != undefined && infos.length}}
    {{each infos as info key}}
    <div class="design-detail split4 boxing transition" id="tr-{{info.id}}" data-id="{{info.id}}">
        <div class="panel">
            <div class="imager" style="background-image:url(<?= Render::upload('{{info.thumb}}') ?>);">
                <a href="<?= Url::to('@web/seer/design?id={{info.id}}') ?>"></a>
            </div>
            <div class="bodyer">
                <div class="title">{{info.title}}<span class="design-style styles">{{info.style}}</span></div>
                <div class="user clear">
                    <div class="view"><i class="icon-eye-open"></i>{{info.view}}</div>
                    <div class="collection"><i class="icon-heart cl-red"></i>{{info.collection}}</div>
                    <div class="photo"><img src="<?= Render::upload('{{info.designer.photo}}') ?>"></div>
                    <div class="username"><p>{{info.designer.nickname}}</p><p class="cl-red fs-12px">{{info.designer.star | star}}</p></div>
                </div>
            </div>
            <?php if(Yii::$app->isLogin() && Yii::$app->user->employer()) { ?>
            {{if collection[info.id]}}
            <button class="collection-data flyer-button normal border-round narrow thin" data-handle="revoke">取消收藏</button>
            {{else}}
            <button class="collection-data flyer-button normal border-round narrow thin" data-handle="collection">加入收藏</button>
            {{/if}}
            <?php } ?>
        </div>
    </div>
    {{/each}}
    {{else}}
    <div class="pd-10px"><i class="icon-ban-circle"></i> 暂时没有找到相匹配的作品！</div>
    {{/if}}
</script>